<template>
  <div>
    <NavBar title="任务中心"></NavBar>
    <Search />
    <List type="task">
        <template slot="operate" slot-scope="{ row }">
            <van-button v-if="row.status === 2 && row.isMain === 1" type="primary" size="mini" @click.stop="showApprove(row)">审批</van-button>
            <van-button v-else-if="row.status === 3 && row.isMain === 1" type="primary" size="mini" @click.stop="showConfirm(row)">确认完成</van-button>
        </template>
    </List>
    <van-dialog v-model="dialog.approve" title="您将接收任务：" :show-confirm-button="false" :show-cancel-button="false">
        <div class="approve-text">{{dialog.data.number}} {{dialog.data.name}}</div>
        <div class="approve-btn">
          <van-button type="default" size="mini" @click.stop="dialog.approve = false">取 消</van-button>
          <van-button type="danger" size="mini" @click.stop="handleApprove(0)" style="margin: 0 1rem">拒 绝</van-button>
          <van-button type="primary" size="mini" @click.stop="handleApprove(1)">确 认</van-button>
        </div>
    </van-dialog>

    <van-dialog v-model="dialog.confirm" title="请确认如下任务是否已经完成：" show-cancel-button @confirm="handleConfirm">
        <div style="padding:0.3rem 0; font-size: .346667rem">{{dialog.data.number}} {{dialog.data.name}}</div>
        <!-- <div class="approve-btn">
          <van-button type="default" size="mini" @click.stop="dialog.approve = false">取 消</van-button>
          <van-button type="danger" size="mini" @click.stop="handleApprove(0)" style="margin: 0 1rem">拒 绝</van-button>
          <van-button type="primary" size="mini" @click.stop="handleApprove(1)">接 收</van-button>
        </div> -->
    </van-dialog>

    <TabBar />
  </div>
</template>

<script>
import NavBar from "../../components/NavBar";
import TabBar from "../../components/TabBar";
import Search from "../../components/task/Search";
import List from "../../components/task/List";
import { Toast, Dialog  } from "vant";

import { TaskList, PilotHandle, PilotComplete } from "../../api/task";
export default {
  components: {
    NavBar,
    TabBar,
    Search,
    List,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      search: {
        name: undefined,

        status: undefined,
        status_name: undefined,

        time: undefined,
        time_name: undefined,
        type: 1,
      },
      pagination: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        finished: false
      },
      list: [],
      dialog: {
        data: {},
        approve: false,
        confirm: false,
      }
    };
  },
  methods: {
    clickLeft() {
      Toast("返回");
    },
    async getList() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      let { search, pagination } = this,
          { data: { data, totalCount } } = await TaskList({ ...search, ...pagination }),
          { pageNo } = pagination
      if(pageNo === 1){
        this.list = data || [];
      }else{
        this.list = this.list.concat(data || [])
      }
      this.pagination.total = totalCount
      Toast.clear()
    },
    showApprove(data){
      this.dialog.approve = true
      this.dialog.data = data
    },
    async handleApprove(accept){
      let { data: { id, area, total } } = this.dialog
      let { status, message } = await PilotHandle({ id, accept, area, total })
      if(status === 1){
        Toast.success('操作成功');
        this.getList()
      }else{
        Toast.fail(message);
      }
      this.dialog.approve = false
    },
    showConfirm(data){
      this.dialog.confirm = true
      this.dialog.data = data
    },
    async handleConfirm(){
      let { id } = this.dialog.data
      let { status, message } = await PilotComplete(id)
      if(status === 1){
        Toast.success('操作成功');
        this.getList()
      }else{
        Toast.fail(message);
      }
      this.dialog.confirm = false
    }
  },
  created() {
    this.getList();
  },
  provide() {
    return {
      Search: () => this.search,
      Pagination: () => this.pagination,
      GetList: this.getList,
      List: () => this.list,
    };
  },
};
</script>

<style>
.box {
  width: 2.666667rem;
  height: 2.666667rem;
  background: pink;
}
.approve-text{
  padding:0.3rem 0; 
  font-size: .346667rem;
  text-align: center;
}
.approve-btn{
  /* font-size: .346667rem; */
  padding-top: 0.1rem;
  padding-bottom: .5rem;
  text-align: center;
}
</style>